<template>
  <div class="box">
    <p-modal
      title="新增"
      :visible="skillVisible"
      :confirm-loading="skillConfirmLoading"
      @ok="addSkills"
      @cancel="handleCancel"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-form-model-item ref="name" label="工序编码" prop="name">
          <p-input disabled :value="mesPeProcessInfo.processmcode" placeholder="请输入工序代码"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="工序名称" prop="name">
          <p-input disabled :value="mesPeProcessInfo.processmname" placeholder="请输入工序名称"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="工序描述" prop="name">
          <p-input disabled :value="mesPeProcessInfo.processsprc" placeholder="请输入工序描述"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="工序层级" prop="name">
          <p-input disabled :value="mesPeProcessInfo.processlayer" placeholder="请输入工序层级"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="技能" prop="name">
          <div class="skill-box" @click="showSubModal">
            <span
              class="select-other"
              v-for="(item, index) in selectSkillArr"
              :key="index"
            >{{ item.skillName }} &nbsp;&nbsp;&nbsp;&nbsp;</span>
          </div>
        </p-form-model-item>
      </p-form-model>

      <div>
        <MesPeProcessMaterialBasisListSkillModalSub 
        :selectedProcessmcode = "selectedProcessmcode"
        :mesPeProcessId = "mesPeProcessId"
        ref="modalForm" @selectSkillOk="selectSkillOk"></MesPeProcessMaterialBasisListSkillModalSub>
      </div>
    </p-modal>
  </div>
</template>

<script type="text/javascript">
import { postAction, getAction, deleteAction } from "@/api/manage";
import MesPeProcessMaterialBasisListSkillModalSub from "./MesPeProcessMaterialBasisListSkillModalSub.vue";

export default {
  props: {
    mesPeProcessId: {
      type: String,
    },
    selectedProcessmcode: {
      type: String,
    },    
  },

  data() {
    return {
      skillVisible: false,
      skillConfirmLoading: false,

      mesPeProcessInfo: {
        processmcode: "",
        processmname: "",
        processsprc: "",
        processlayer: "",
      },
      selectSkillArr: [],

      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        name: "",
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {},

      url: {
        info: "/mes-craft/craft/mesPeDefinition/queryByDefinitionId",
        add: "/mes-craft/craft/mesPeSkill",
      },
    };
  },

  watch: {
    mesPeProcessId(newVal, oldVal) {
      this.getInfo();
    },
  },

  mounted() {
    this.getInfo();
  },
  methods: {
    addSkills() {
      const params = this.selectSkillArr.map((ele) => {
        return {
          mesPeDefinitionId: this.mesPeProcessId,
          processCode: this.mesPeProcessInfo.processmcode,
          skillCode: ele.skillCode,
        };
      });
      postAction(this.url.add, params).then((res) => {
        if (res.success) {
          this.skillVisible = false;
          this.$emit('ok')
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    getInfo() {
      const params = {
        id: this.mesPeProcessId,
      };
      getAction(this.url.info, params).then((res) => {
        if (res.success) {
          Object.keys(this.mesPeProcessInfo).forEach((ele) => {
            this.mesPeProcessInfo[ele] = res.data[ele];
          });
          console.log("this.mesPeProcessInfo", this.mesPeProcessInfo);
        }
      });
    },

    showModal() {
      this.skillVisible = true;
      this.selectSkillArr = [];
    },
    handleCancel() {
      this.skillVisible = false;
    },
    comfirm() {
      console.log("ok");
    },

    showSubModal() {
      console.log('记录');
      console.log(this.selectSkillArr.length);
      console.log(this.selectSkillArr.length>0);
      
      this.$refs.modalForm.showModal(this.selectSkillArr.length==0);
    },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },

    selectSkillOk(selectSkillArr) {
      this.selectSkillArr = selectSkillArr;
    },
  },
  components: {
    MesPeProcessMaterialBasisListSkillModalSub,
  },
};
</script>

<style lang="less" scoped>
.skill-box {
  cursor: pointer;
  border: 1px solid #ddd;
  min-height: 40px;
}
</style>
